<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      title="选择内容"
      width="850px"
      @close="close"
    >
      <div class="content">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="功能" prop="value">
            <el-select
              v-model="form.value"
              placeholder="请选择"
              @change="initData"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <!-- 图片类-->
          <el-form-item label="图标" v-if="form.value !== null">
            <div style="display:flex">
            <div class="upload-container">
              <el-upload
                :action="imageUploadUrl"
                :show-file-list="false"
                :headers="{ 'X-BUSINESS-TOKEN': $store.state.user.token }"
                :before-upload="handleImgBefore"
                :on-success="
                  (res, file) => {
                    return handleImgSuccess(res, file, 'icon');
                  }
                "
                :style="{ width: '50px', height: '50px' }"
                class="app-uploader-img-plus"
              >
                <el-image
                  v-if="form.icon"
                  :style="{ width: '50px', height: '50px' }"
                  :src="fileBaseUrl + form.icon"
                  class="img"
                  fit="contain"
                />
                <img
                  style="height: 50px; width: 50px"
                  v-else-if="!form.icon && form.value !== 0 && iconFilter[form.value]"
                  :src="fileBaseUrl + iconFilter[form.value].icon"
                />
                <i
                  v-else
                  :style="{ width: '50px', height: '50px' }"
                  class="el-icon-plus"
                />
              </el-upload>
            </div>
            <div style="font-size: 12px; line-height: 20px; margin-left:10px">
              <div
              style="color: #179AD2;"
              :style="form.value !== 0 ? 'cursor:pointer' : 'cursor:not-allowed; color:red'"
              @click="clearIcon"
              >恢复默认</div>
              <div>
                只能上传jpg/png/gif文件，建议像素{{
                80 + " * " + 80
              }}，且不超过1MB
              </div>

            </div>
          </div>
          </el-form-item>

          <el-form-item label="入口名称" prop="entryName">
            <el-input
              v-model="form.entryName"
              style="width: 200px"
              maxlength="6"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="自定义标签"
            v-if="[0, 3, 4, 5, 6, 7, 8].includes(form.value)"
          >
            <el-input
              v-model="form.tig"
              style="width: 200px"
              maxlength="3"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="订单类型"
            prop="orderType"
            v-if="[1].includes(form.value)"
          >
            <el-checkbox-group
              v-model="form.orderType"
              @change="checkboxChange"
            >
              <el-checkbox :label="5" name="5" :disabled="checkboxStatus === 1"
                >商城</el-checkbox
              >
              <el-checkbox :label="6" name="6" :disabled="checkboxStatus === 2"
                >点餐</el-checkbox
              >
              <el-checkbox :label="7" name="7" :disabled="checkboxStatus === 1"
                >预订</el-checkbox
              >
              <el-checkbox :label="17" name="17" :disabled="checkboxStatus === 1"
                >预约</el-checkbox
              >
              <el-checkbox :label="9" name="9" :disabled="checkboxStatus === 1"
                >赠送会员</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>

          <!-- 跳转链接类型 -->
          <el-form-item v-if="[0].includes(form.value)" label=" 跳转链接">
            <el-radio-group v-model="form.dump.type" size="small">
              <el-radio-button label="EMPTY">无</el-radio-button>
              <el-radio-button label="INSIDE">站内链接</el-radio-button>
              <el-radio-button label="FEATURE">手机功能</el-radio-button>
              <el-radio-button label="WXAPP">小程序</el-radio-button>
              <el-radio-button label="URL">自定义链接</el-radio-button>
            </el-radio-group>
          </el-form-item>

          <div v-if="[0].includes(form.value)">
            <!-- 站内链接 -->
            <el-form-item v-if="form.dump.type === 'INSIDE'" label="站内链接">
              <el-button size="small" @click="openInsideLink"
                >选择链接</el-button
              >
              <el-button
                size="small"
                @click="customPath"
                :style="form.isPath ? 'background:#ffb72f;color: #fff' : ''"
                >自定义路径</el-button
              >
              <el-form-item v-if="!form.isPath" prop="dump.insidePage">
                <div v-if="form.dump.insideParams.remark">
                  链接地址：{{ form.dump.insideParams.remark }}
                </div>
              </el-form-item>
              <el-form-item
                v-if="form.isPath"
                prop="path"
                style="margin-top: 20px"
              >
                <el-input
                  placeholder="请填写路径"
                  maxlength="100"
                  v-model.trim="form.path"
                />
              </el-form-item>
            </el-form-item>

            <!-- 手机功能-->
            <div v-if="form.dump.type === 'FEATURE'">
              <el-form-item prop="dump.feature" label="手机功能">
                <el-select
                  v-model="form.dump.feature"
                  placeholder="请选择"
                  class="w-400"
                >
                  <el-option label="拨打电话" value="CALL" />
                  <!--                  <el-option label="微信客服助手" value="CONTACT"/>-->
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="form.dump.feature === 'CALL'"
                prop="dump.featureParams.phone"
                label="电话"
              >
                <el-input
                  v-model="form.dump.featureParams.phone"
                  class="w-400"
                />
              </el-form-item>
            </div>

            <!-- 小程序 -->
            <div v-if="form.dump.type === 'WXAPP'">
              <el-form-item label="小程序appId" prop="dump.appId">
                <el-input v-model.trim="form.dump.appId" style="width: 200px" />
              </el-form-item>
              <el-form-item label="小程序路径" prop="dump.path">
                <el-input v-model.trim="form.dump.path" style="width: 200px" />
              </el-form-item>
            </div>

            <!-- 公众号推文 -->
            <el-form-item
              v-if="form.dump.type === 'URL'"
              label="推文地址"
              prop="dump.url"
            >
              <el-input v-model.trim="form.dump.url" style="width: 200px" />
              <div style="font-size: 12px">仅支持打开关联的公众号的文章</div>
            </el-form-item>
          </div>

          <div v-if="[0].includes(form.value)">
            <el-form-item label="谁可见">
              <el-radio v-model="form.isMemberShow" :label="false">所有人</el-radio>
              <el-radio v-model="form.isMemberShow" :label="true">仅会员</el-radio>

            </el-form-item>
          </div>

          <div v-if="[7].includes(form.value) && form.contactsType !== undefined">
            <el-form-item label="客服类型">
              <div>
                <el-radio v-model="form.contactsType" :label="0">小程序客服</el-radio>
                <el-radio v-model="form.contactsType" :label="1">企业微信客服</el-radio>
              </div>
              <div v-if="form.contactsType === 1">
                <el-form-item prop="contactsInfo.address">
                  <el-input v-model.trim="form.contactsInfo.address" class="w-400" placeholder="仅支持打开关联的企业微信客服" />
                </el-form-item>
                <el-form-item style="margin-top:20px" prop="contactsInfo.id">
                  <el-input v-model.trim="form.contactsInfo.id" class="w-400" placeholder="企业ID" />
                </el-form-item>
                <p>
									可点击查看
									<span style="color: #409eff; cursor: pointer;" @click="operBtn">操作详情</span>
									进行操作。
								</p>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" round @click="hide">取 消</el-button>
        <el-button size="small" round type="primary" @click="submit('form')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 站内链接 -->
    <DialogInsideLink ref="insideLink" />
    <CustomerOperation ref="customerOperationDialog" />
  </div>
</template>


<script>
import config from "./config/DialogOten";
import { mapGetters } from "vuex";
import { imgUploadUrl } from "@/api/upload";
import DialogInsideLink from "@/views/wxaBuildModule/views/components/DialogInsideLink";
import CustomerOperation from '../../../components/DialogInsideLink/components/CustomerOperation.vue';
export default {
  components: {
    DialogInsideLink,
    CustomerOperation
  },
  data() {
    return {
      checkboxStatus: 0,
      form: {
        id: "",
        value: null,
        icon: "",
        entryName: "",
        tig: "",
        orderType: [],
        path: "",
        isPath: false,
        isMemberShow: false,
        contactsType: 0,
        contactsInfo: {
          address: '',
          id: ''
        },
        dump: {
          appId: "",
          feature: "",
          featureParams: "",
          insidePage: "",
          insideParams: "",
          path: "",
          type: "EMPTY",
          url: "",
        },
      },
      iconFilter: config.iconSourceMap,
      dialogVisible: false,
      options: config.options,
      rules: config.rules,
      imageUploadUrl: imgUploadUrl,
    };
  },
  computed: {
    ...mapGetters(["fileBaseUrl"]),
  },
  methods: {
    checkboxChange(vals) {
      if (!vals.length) return (this.checkboxStatus = 0);
      vals.includes(6) ? (this.checkboxStatus = 1) : (this.checkboxStatus = 2);
    },
    operBtn() {
			this.$refs.customerOperationDialog.open({ roleType: 'qyWx_kf' });
		},
    open(form = {}) {
      if (JSON.stringify(form) === "{}") {
        this.form.id = config.uuid();
        this.checkboxStatus = 0;
      } else {
        this.form = JSON.parse(JSON.stringify(form));
        this.checkboxChange(this.form.orderType);
      }
      this.show();
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    show() {
      this.dialogVisible = true;
    },

    close() {
      this.initData();
      this.loading = false;
    },
    hide() {
      this.resolve = null;
      this.reject = null;
      this.dialogVisible = false;
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.value !== 0) {
            !this.form.icon && (this.form.icon = this.iconFilter[this.form.value].icon);
            this.form.path = this.iconFilter[this.form.value].path;
            if (this.form.value === 1) {
              const { orderType } = this.form;
              let path = orderType.includes(6) ? "path2" : "path";
              this.form.path = this.iconFilter[this.form.value][path];
            }
          }
          console.log(this.form);
          this.resolve(JSON.parse(JSON.stringify(this.form)));
          this.initData();
          this.hide();
        } else {
          return false;
        }
      });
    },
    clearIcon() {
      if(this.form.value === 0) return
      this.form.icon = ''
    },
    initData(value = null) {
      this.form = {
        id: "",
        value: value,
        icon: "",
        entryName: "",
        tig: "",
        orderType: [],
        path: "",
        isPath: false,
        isMemberShow: false,
         contactsType: 0,
        contactsInfo: {
          address: '',
          id: ''
        },
        dump: {
          appId: "",
          feature: "",
          featureParams: "",
          insidePage: "",
          insideParams: "",
          path: "",
          type: "EMPTY",
          url: "",
        },
      };
    },
    // 上传图标之前
    handleImgBefore(file) {
      return this.beforeUploadImg(file, this, 0, 0, 1, ["JPG", "PNG", "GIF"]);
    },
    // 上传图标成功
    handleImgSuccess(res, file, type) {
      if (res.code === 0) {
        this.form[type] = res.data.path;
        this.$refs.form.clearValidate([type]);
      } else {
        this.$message.error(res.msg);
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    openInsideLink() {
      this.form.isPath = false;
      this.$refs.form.clearValidate(["path"]);
      this.$refs.insideLink.open({ row: this.form.dump }).then((res) => {
        this.form.dump.insidePage = res.insidePage || null;
        this.form.dump.insideParams = {
          insidePageType: res.insideParams.insidePageType || null,
          pageId: (res.insideParams && res.insideParams.pageId) || null,
          goodsSerial:
            (res.insideParams && res.insideParams.goodsSerial) || null,
          commonCode: (res.insideParams && res.insideParams.commonCode) || null,
          remark: (res.insideParams && res.insideParams.remark) || null,
        };
        this.form.dump.mode = res.mode || null;
        this.form.dump.path = res.path || null;
      });
    },
    customPath() {
      this.form.isPath = true;
      this.$refs.form.clearValidate(["dump.insidePage"]);
    },
  },
};
</script>
